<template>
  <div>
    <!--1视图-->
    抽烟<input type="checkbox" v-model="hobby" value="抽烟"><br>
    喝酒<input type="checkbox" v-model="hobby" value="喝酒"><br>
    烫头<input type="checkbox" v-model="hobby" value="烫头"><br>
    你选择的:{{hobby}}<br>
    <button @click="change">点击切换</button>
    <span v-if="flag">
      你好Vue
    </span>
    <span v-if="!flag">
      你好尼古拉斯
    </span>
  </div>

</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      //2属性定义
      hobby:[],
      flag:true,
    }
  }, methods: {
    //3自定义方法
    change(){
      this.flag=!this.flag;
    }
  }, created() {
    //4.钩子函数
    console.log("2.created")
  },beforeCreate() {
    console.log("1.beforeCreate")
  },beforeMount() {
    console.log("3.beforeMount")
  }
}
</script>

<style scoped>

</style>